<template>
  <div v-loading="loading">
    <queryHead  v-if="head"  :explain="explain" :result="msg" :time="time" :price="price" @query="query"/>
    <div v-if="lock" style="background-color: #fafafa;padding: 5px;border-radius: 5px">
      <div class="row-label-block">
        <i class="el-icon-s-check" style="display: block; margin-bottom: 20px">
          <label>雷达评分</label>
        </i>
        <template v-if="qjld.apply_report_detail">
          申请准入分：{{
            numDelivery(100 - parseInt(qjld.apply_report_detail.A22160001) / 10)
          }}分 (总分100，分数越高越安全)
          <el-progress text-inside :stroke-width="17"
                       :percentage="numDelivery( 100 - parseInt(qjld.apply_report_detail.A22160001)/10)"
                       style="margin-bottom: 15px;"/>
        </template>

        <template v-else>
          <P>申请准入分：未命中</P>
        </template>

        <template v-if="qjld.behavior_report_detail">
          贷款行为分：{{ numDelivery(qjld.behavior_report_detail.B22170001) / 10 }}分
          <el-progress :text-inside="true" :stroke-width="17"
                       :percentage="numDelivery(qjld.behavior_report_detail.B22170001) / 10 "
                       :format="format" style="margin-bottom: 15px"/>
        </template>
        <template v-else>
          <P>贷款行为分：未命中</P>
        </template>

        <template v-if="qjld.apply_report_detail">
          申请准入置信度：{{ numDelivery(qjld.apply_report_detail.A22160002) }}%
          <el-progress text-inside :stroke-width="17"
                       :percentage="numDelivery(qjld.apply_report_detail.A22160002)"
                       style="margin-bottom: 15px"/>
        </template>
        <template v-else>
          <P>申请准入置信度：未命中</P>
        </template>

        <template v-if="qjld.current_report_detail">
          消金额度置信度：{{ numDelivery(qjld.current_report_detail.C22180012) }}%
          <el-progress :text-inside="true" :stroke-width="20"
                       :percentage="numDelivery(qjld.current_report_detail.C22180012)"
                       style="margin-bottom: 15px"/>
          网贷额度置信度：{{ numDelivery(qjld.current_report_detail.C22180002) }}%
          <el-progress :text-inside="true" :stroke-width="20"
                       :percentage="numDelivery(qjld.current_report_detail.C22180002)"
                       style="margin-bottom: 15px"/>
        </template>
        <template v-else>
          <P>消金额度置信度：未命中</P>
          <P>网贷额度置信度：未命中</P>
        </template>

        <template v-if="qjld.behavior_report_detail">
          贷款行为置信度：{{ numDelivery(qjld.behavior_report_detail.B22170051) }}%
          <el-progress :stroke-width="17"
                       :percentage="numDelivery(qjld.behavior_report_detail.B22170051)"
                       style="margin-bottom: 15px"/>
        </template>
        <template v-else>
          <P>贷款行为置信度：未命中</P>
        </template>
        <div class="text-center">说明：置信度越高，数据可信度越高。分值区间均为0-100分，参考意见60分为一个门槛，80分以上为优秀，0分表示无数据。</div>
      </div>
      <div class="row-label-block">
        <i class="el-icon-s-check">
          <label>雷达查询报告</label>
        </i>
        <div class="row-label-block-content">
          <template v-if="qjld.apply_report_detail != undefined">
            <el-row>
              <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-lg-6">
                <div class="dtcxbg-first">
                  <div class="dtcxbg-box" style="display: flex; align-items: flex-end;"><h6>机构总查询次数</h6>
                    <div style="margin-left: 20px;"><label>
                      {{
                        qjld.apply_report_detail != undefined ? qjld.apply_report_detail.A22160006 != undefined ? qjld.apply_report_detail.A22160006 : 0 : 0
                      }}
                    </label> <i>次</i></div>
                  </div>
                  <div class="dtcxbg-box2">
                    <div><h6> 近一个月 </h6>
                      <div><label>
                        {{
                          qjld.apply_report_detail != undefined ? qjld.apply_report_detail.A22160008 != undefined ? qjld.apply_report_detail.A22160008 : 0 : 0
                        }}
                      </label> <i>次</i></div>
                    </div>
                    <div><h6> 近三个月 </h6>
                      <div><label>
                        {{
                          qjld.apply_report_detail != undefined ? qjld.apply_report_detail.A22160009 != undefined ? qjld.apply_report_detail.A22160009 : 0 : 0
                        }}
                      </label> <i>次</i></div>
                    </div>
                    <div><h6> 近半年 </h6>
                      <div><label>
                        {{
                          qjld.apply_report_detail != undefined ? qjld.apply_report_detail.A22160010 != undefined ? qjld.apply_report_detail.A22160010 : 0 : 0
                        }}
                      </label> <i>次</i></div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-for="(item, index) in qjldParams.apply"
                   class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-lg-6">
                <div class="dtcxbg">
                  <div class="dtcxbg-box"><h6>{{ item.ct }}</h6>
                    <div>
                      <label>
                        {{
                          qjld.apply_report_detail != undefined ? qjld.apply_report_detail[item.et] != undefined ? qjld.apply_report_detail[item.et] : 0 : 0
                        }}
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </el-row>
          </template>
          <p v-if="qjld.apply_report_detail == undefined" style="text-align: center">未命中</p>
        </div>

        <i class="el-icon-s-check">
          <label>雷达信用报告</label>
        </i>
        <div class="row-label-block-content">
          <el-row>
            <div v-for="(item, index) in qjldParams.currentBelongBehavior"
                 class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-lg-6">
              <div class="dtcxbg">
                <div class="dtcxbg-box"><h6>{{ item.ct }}</h6>
                  <div><label>
                    {{
                      qjld.behavior_report_detail != undefined ? qjld.behavior_report_detail[item.et] != undefined ? qjld.behavior_report_detail[item.et] : 0 : 0
                    }}
                  </label></div>
                </div>
              </div>
            </div>

            <div v-for="(item, index) in qjldParams.current"
                 class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-lg-6">
              <div class="dtcxbg">
                <div class="dtcxbg-box"><h6>{{ item.ct }}</h6>
                  <div><label>
                    {{
                      qjld.current_report_detail != undefined ? qjld.current_report_detail[item.et] != undefined ? qjld.current_report_detail[item.et] : 0 : 0
                    }}
                  </label></div>
                </div>
              </div>
            </div>

            <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-lg-6">
              <div class="dtcxbg-first">
                <div class="dtcxbg-box"><h6>近12个月贷款金额范围内贷款笔数</h6></div>
                <div class="dtcxbg-box2">
                  <div><h6>1k 及以下</h6>
                    <div><label>
                      {{
                        qjld.behavior_report_detail != undefined ? qjld.behavior_report_detail.B22170012 != undefined ? qjld.behavior_report_detail.B22170012 : 0 : 0
                      }}
                    </label></div>
                  </div>
                  <div><h6> 1k-3k </h6>
                    <div><label>
                      {{
                        qjld.behavior_report_detail != undefined ? qjld.behavior_report_detail.B22170013 != undefined ? qjld.behavior_report_detail.B22170013 : 0 : 0
                      }}
                    </label></div>
                  </div>
                  <div><h6> 3k-10k</h6>
                    <div><label>
                      {{
                        qjld.behavior_report_detail != undefined ? qjld.behavior_report_detail.B22170014 != undefined ? qjld.behavior_report_detail.B22170014 : 0 : 0
                      }}
                    </label></div>
                  </div>
                  <div><h6>1w 以上</h6>
                    <div><label>
                      {{
                        qjld.behavior_report_detail != undefined ? qjld.behavior_report_detail.B22170015 != undefined ? qjld.behavior_report_detail.B22170015 : 0 : 0
                      }}
                    </label></div>
                  </div>
                </div>
              </div>
            </div>

          </el-row>

        </div>

        <div style="height:20px"></div>
        <i class="el-icon-s-check">
          <label>雷达行为报告</label>
        </i>
        <template v-if="qjld.behavior_report_detail != undefined">
          <table id="sfhy">
            <thead>
            <tr>
              <th>周期</th>
              <th>近1个月</th>
              <th>近3个月</th>
              <th>近6个月</th>
              <th>近12个月</th>
              <th>近24个月</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>贷款笔数</td>
              <td>{{ qjld.behavior_report_detail.B22170002 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170003 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170004 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170005 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170006 }}</td>
            </tr>
            <tr>
              <td>贷款总金额</td>
              <td>{{ qjld.behavior_report_detail.B22170007 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170008 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170009 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170010 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170011 }}</td>
            </tr>
            <tr>
              <td>贷款机构数</td>
              <td>{{ qjld.behavior_report_detail.B22170016 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170017 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170018 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170019 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170020 }}</td>
            </tr>
            <tr>
              <td>消金类贷款机构数</td>
              <td></td>
              <td></td>
              <td></td>
              <td>{{ qjld.behavior_report_detail.B22170021 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170022 }}</td>
            </tr>
            <tr>
              <td>网贷类贷款机构数</td>
              <td></td>
              <td></td>
              <td></td>
              <td>{{ qjld.behavior_report_detail.B22170023 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170024 }}</td>
            </tr>
            <tr>
              <td>逾期总金额</td>
              <td></td>
              <td></td>
              <td>{{ qjld.behavior_report_detail.B22170031 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170032 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170033 }}</td>
            </tr>
            <tr>
              <td>失败扣款笔数</td>
              <td>{{ qjld.behavior_report_detail.B22170035 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170036 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170037 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170038 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170039 }}</td>
            </tr>
            <tr>
              <td>还款总金额</td>
              <td>{{ qjld.behavior_report_detail.B22170040 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170041 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170042 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170043 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170044 }}</td>
            </tr>
            <tr id="co">
              <td>成功扣款笔数</td>
              <td>{{ qjld.behavior_report_detail.B22170045 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170046 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170047 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170048 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170049 }}</td>
            </tr>
            <tr>
              <td>M0+逾期贷款笔数</td>
              <td></td>
              <td></td>
              <td>{{ qjld.behavior_report_detail.B22170025 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170026 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170027 }}</td>
            </tr>
            <tr>
              <td>M1+逾期贷款笔数</td>
              <td></td>
              <td></td>
              <td>{{ qjld.behavior_report_detail.B22170028 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170029 }}</td>
              <td>{{ qjld.behavior_report_detail.B22170030 }}</td>
            </tr>
            </tbody>
          </table>
        </template>
        <p v-else style="text-align: center">未命中</p>
      </div>
    </div>
  </div>
</template>

<script>
  import queryHead from "@/views/components/queryHead.vue";

  import {queryRecord, queryData} from "@/api/system/query";

  import {qjldParams} from '@/utils/qjldParams.js';

  export default {
    components: {queryHead},
    name: "qjld",
    props: {
      queryData: {
        required: true,
        type: Object
      },
      price: {
        default: null,
        type: Number
      },
      priceType: {
        default: null,
        type: Boolean
      },
      explain: {
        default: null,
        type: String
      },
      head: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        label_style: {
          'text-align': 'center',//文本居中
          'font-weight': '600',
          'height': '60px',
          'width': '20%',
          'word-break': 'keep-all',
          'text-size': '12px'
        },
        content_style: {
          'text-size': '12px',
          'text-align': 'center',
          'min-width': '80px',
          'word-break': 'break-all' //过长时自动换行
        },

        loading: false,
        lock: false,
        msg: undefined,

        time: undefined,
        balance: undefined,

        qjld: {},
        qjldParams
      }
    },
    created() {
      this.loading = true
      queryRecord(this.queryData).then(response => {
        this.disResponse(response)
      })
    },
    methods: {
      query() {
        this.loading = true
        queryData(this.queryData).then(response => {
          this.disResponse(response)
        })
      },
      disResponse(response) {
        if (response.info) {
          this.time = response.time
          let info = JSON.parse(response.info)
          console.log('--info--', info)

          this.msg = info.retmsg
          if (info.retcode == '000000' && info.retdata) {
            this.qjld = info.retdata
            if (!this.qjld.behavior_report_detail) {
              this.qjld.behavior_report_detail = {
                B22170002: 0,
                B22170003: 0,
                B22170004: 0,
                B22170005: 0,
                B22170006: 0,
                B22170007: 0,
                B22170008: 0,
                B22170009: 0,
                B22170010: 0,
                B22170011: 0,
                B22170016: 0,
                B22170017: 0,
                B22170018: 0,
                B22170019: 0,
                B22170020: 0,
                B22170021: 0,
                B22170022: 0,
                B22170023: 0,
                B22170024: 0,
                B22170025: 0,
                B22170026: 0,
                B22170027: 0,
                B22170028: 0,
                B22170029: 0,
                B22170030: 0,
                B22170031: 0,
                B22170032: 0,
                B22170033: 0,
                B22170035: 0,
                B22170036: 0,
                B22170037: 0,
                B22170038: 0,
                B22170039: 0,
                B22170040: 0,
                B22170041: 0,
                B22170042: 0,
                B22170043: 0,
                B22170044: 0,
                B22170045: 0,
                B22170046: 0,
                B22170047: 0,
                B22170048: 0,
                B22170049: 0
              }
            }
            this.lock = true
          }
        }
        this.loading = false
      },
      numDelivery(num) {
        let result = parseFloat(num);
        if (isNaN(result)) {
          return 0
        }
        result = Math.round(num * 100) / 100
        return result
      },
      format(percentage) {
        return percentage === 100 ? '满' : `${percentage}分`
      }
    }
  };
</script>

<style scoped>

  #sfhy {
    width: 98%;
    border-collapse: collapse;
    margin: 5px 15px;
    text-size: 6px;
  }

  #sfhy td, th {
    border: 1px solid #cbbfbf;
    text-align: center;
    padding: 8px 0;
    color: #909399;
    font-size: 12px;
  }

  /*行块级标题标签start*/
  .row-label-block {
    height: 100%;
    margin-bottom: 30px;
  }

  .row-label-block-content {
    box-sizing: border-box;
    padding: 0 0 0 14px;
  }

  .dtcxbg-first, .dtcxbg {
    box-sizing: border-box;
    height: 125px;
    padding: 5px;
  }

  .dtcxbg-first {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  .dtcxbg-box, .dtcxbg-box2 {
    box-sizing: border-box;
    padding: 5px 20px;
    height: 68px;

  h6 {
    font-weight: bold;
  }

  label {
    font-size: 26px;
    color: #53a8fe;
  }

  }

  .dtcxbg-box2 {
    display: flex;
    justify-content: space-between;

  h6 {
    font-size: 12px;
    font-weight: normal;
    color: #a0a0a0;
    /*background-color: #1ab394;*/
    margin: 5px 0;
  }

  label {
    font-size: 16px;
  }

  }
  }

  .dtcxbg {

  .dtcxbg-box {
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

  h6 {
    margin-top: 3px;
    font-weight: bold;
    color: #66686d;
  }

  label {
    font-size: 26px;
    color: #53a8fe;
  }

  }
  }

  .text-center {
    text-align: center !important;
  }

  .dtcxbg-box, .dtcxbg-box2 {
    background-color: #ecf2f9;
  }

  #co td {
    color: red;
  }
</style>

